<template>
	<Card shadow style="height: 100%;width: 100%;overflow:hidden">
		<div class="department-outer">
			<div class="tip-box">
				<b style="margin-right: 20px;">powered by <a target="blank" href="https://github.com/lison16">Lison</a></b>
				<a target="blank" href="https://github.com/lison16/v-org-tree" style="margin-right: 10px;">v-org-tree文档</a>
			</div>
			<div class="zoom-box">
				<zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
			</div>
			<div class="view-box">
				<org-view v-if="data" :data="data" :zoom-handled="zoomHandled" @on-menu-click="handleMenuClick"></org-view>
			</div>
		</div>
	</Card>
</template>

<script>
import OrgView from './components/org-view.vue';
import ZoomController from './components/zoom-controller.vue';
import { getOrgData } from '@/api/data';
import './index.less';
const menuDic = {
	edit: '编辑部门',
	detail: '查看部门',
	new: '新增子部门',
	delete: '删除部门'
};
export default {
	name: 'org_tree_page',
	components: {
		OrgView,
		ZoomController
	},
	data() {
		return {
			data: null,
			zoom: 100
		};
	},
	computed: {
		zoomHandled() {
			return this.zoom / 100;
		}
	},
	methods: {
		setDepartmentData(data) {
			data.isRoot = true;
			return data;
		},
		handleMenuClick({ data, key }) {
			this.$Message.success({
				duration: 5,
				content: `点击了《${data.label}》节点的'${menuDic[key]}'菜单`
			});
		},
		getDepartmentData() {
			getOrgData().then(res => {
				const { data } = res;
				this.data = data;
			});
		}
	},
	mounted() {
		this.getDepartmentData();
	}
};
</script>

<style></style>
